<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>班级学情总览</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <!-- 引入数据源 -->
    <script src="yuwen.js"></script>
    <script src="shuxue.js"></script>
</head>

<body>
    <!-- 创建一个容器用于显示成绩分布直方图 -->
    <div id="score-histogram" style="width: 600px; height: 400px;"></div>
    <!-- 创建一个容器用于显示学习时长折线图 -->
    <div id="study-time-line" style="width: 600px; height: 400px;"></div>

    <button onclick="downloadChart()" style="margin-top: 20px;">下载图表</button>

    <!-- ... existing code ... -->
    <script>
        // 添加下载函数
        function downloadChart() {
            const img = new Image();
            img.src = myChart.getDataURL({
                type: 'png',
                pixelRatio: 2,
                backgroundColor: '#fff'
            });
            img.onload = function () {
                const link = document.createElement('a');
                link.href = img.src;
                link.download = '班级学情总览.png';
                link.click();
            };
        }
        // 计算成绩分布
        // 修改为四个区间
        const scoreDistribution = [0, 0, 0, 0]; 
        console.log('shuxueMockData :>> ', shuxueMockData);
        let mockData = []
        shuxueMockData.forEach(item => {
            mockData.push(item)
        })
        yuwenMockData.forEach(item => {
            mockData.push(item)
        })
        mockData.forEach(item => {
            const score = item.examScore;
            if (score < 60) {
                scoreDistribution[0]++;
            } else if (score < 80) {
                scoreDistribution[1]++;
            // 新增 80 到 90 分的判断
            } else if (score < 90) { 
                scoreDistribution[2]++;
            } else {
                scoreDistribution[3]++;
            }
        });

        // 初始化成绩分布直方图 ECharts 实例
        const scoreChart = echarts.init(document.getElementById('score-histogram'));
        const scoreOption = {
            title: {
                text: '成绩分布直方图',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                // 修改为新的分数区间
                data: ['60分以下', '60分到80分', '80分到90分', '90分到100分'], 
                name: '分数区间',
                nameTextStyle: {
                    color: '#666',
                    fontSize: 12,
                    padding: [10, 10, 10, 10]
                }
            },
            yAxis: {
                type: 'value',
                name: '学生人数',
                nameTextStyle: {
                    color: '#666',
                    fontSize: 12,
                    padding: [0, 0, 10, 0]
                }
            },
            series: [{
                type: 'bar',
                data: scoreDistribution,
                itemStyle: {
                    color: '#5470C6'
                }
            }]
        };
        scoreChart.setOption(scoreOption);

        // 模拟学习时长数据（这里简单假设每周平均学习时长）
        const studyTimeData = [4, 5, 6, 7];

        // 初始化学习时长折线图 ECharts 实例
        const studyTimeChart = echarts.init(document.getElementById('study-time-line'));
        const studyTimeOption = {
            title: {
                text: '学习时长折线图',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: ['第1周', '第2周', '第3周', '第4周'],
                name: '时间',
                nameTextStyle: {
                    color: '#666',
                    fontSize: 12,
                    padding: [10, 0, 0, 0]
                }
            },
            yAxis: {
                type: 'value',
                name: '平均学习时长（小时）',
                nameTextStyle: {
                    color: '#666',
                    fontSize: 12,
                    padding: [0, 0, 10, 0]
                }
            },
            series: [{
                type: 'line',
                data: studyTimeData,
                itemStyle: {
                    color: '#91CC75'
                }
            }]
        };
        studyTimeChart.setOption(studyTimeOption);
    </script>
    <!-- ... existing code ... -->
</body>

</html>